<!DOCTYPE html>
<html lang="en-US">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="discrption" content="parallax one page" />
    <meta
      name="keyword"
      content="agency, business, corporate, creative, freelancer, interior, joomla template, K2 Blog, minimal, modern, multipurpose, personal, portfolio, responsive, simple"
    />
    <!-- Title -->
    <title>我的博客</title>
    <!-- Font Google -->
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Karla:400,700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="shortcut icon"
      href="assets/img/favicon.ico"
      type="image/x-icon"
    />
    <link rel="icon" href="assets/img/favicon.ico" type="image/x-icon" />
    <!-- custom styles(optional) -->
    <link href="assets/css/plugins.css" rel="stylesheet" />
    <link href="assets/css/style.css" rel="stylesheet" />
  </head>
  <body class="dsn-effect-scroll dsn-cursor-effect dsn-ajax">
    <div class="preloader">
      <div class="preloader-bar">
        <div class="preloader-progress"></div>
      </div>
      <h1 class="title v-middle">
        <span class="percent">0</span><span class="text-strok">DARO</span
        ><span class="text-fill">DARO</span>
      </h1>
    </div>
    <div class="site-header">
      <div
        class="extend-container d-flex w-100 align-items-baseline justify-content-between align-items-end"
      >
        <div class="inner-header p-relative">
          <div class="main-logo">
            <a href="index.html" data-dsn="parallax"
              ><img
                class="dark-logo"
                src="assets/img/logo-dark.png"
                alt="" /><img
                class="light-logo"
                src="assets/img/logo.png"
                alt=""
            /></a>
          </div>
        </div>
        <div class="menu-icon d-flex align-items-baseline">
          <div class="text-menu p-relative font-heading text-transform-upper">
            <div class="p-absolute text-button">Menu</div>
            <div class="p-absolute text-open">Open</div>
            <div class="p-absolute text-close">Close</div>
          </div>
          <div class="icon-m" data-dsn="parallax">
            <span
              class="menu-icon-line p-relative d-inline-block icon-top"
            ></span
            ><span
              class="menu-icon-line p-relative d-inline-block icon-center"
            ></span
            ><span class="menu-icon-line p-relative d-block icon-bottom"></span>
          </div>
        </div>
        <nav
          class="accent-menu main-navigation p-absolute w-100 d-flex align-items-baseline"
        >
          <div class="menu-cover-title">Menu</div>
          <ul
            class="extend-container p-relative d-flex flex-column justify-content-center h-100"
          >
            <li class="dsn-active dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Home</span
                ><span class="dsn-meta-menu">01</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Home</span
                  >
                </li>
                <li>
                  <a href="index.html"
                    ><span class="dsn-title-menu">One Page 1</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="demo2.html"
                    ><span class="dsn-title-menu">One Page 2</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
                <li>
                  <a href="demo3.html"
                    ><span class="dsn-title-menu">One Page 3</span
                    ><span class="dsn-meta-menu">03</span></a
                  >
                </li>
                <li>
                  <a href="demo-video.html"
                    ><span class="dsn-title-menu">One Page 4</span
                    ><span class="dsn-meta-menu">04</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Sliders</span
                ><span class="dsn-meta-menu">02</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Sliders</span
                  >
                </li>
                <li>
                  <a href="slider2.html"
                    ><span class="dsn-title-menu">Slider Vertical</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="slider-horizontal.html"
                    ><span class="dsn-title-menu">Slider Horizontal</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
                <li>
                  <a href="slider3.html"
                    ><span class="dsn-title-menu">Slider 3 Column</span
                    ><span class="dsn-meta-menu">03</span></a
                  >
                </li>
                <li>
                  <a href="slider.html"
                    ><span class="dsn-title-menu">Slider slice</span
                    ><span class="dsn-meta-menu">04</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Portfolio</span
                ><span class="dsn-meta-menu">03</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Portfolio</span
                  >
                </li>
                <li>
                  <a href="work.html"
                    ><span class="dsn-title-menu">Work 3 columns</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="work-2.html"
                    ><span class="dsn-title-menu">Work V2</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
                <li>
                  <a href="gallery.html"
                    ><span class="dsn-title-menu">gallery</span
                    ><span class="dsn-meta-menu">03</span></a
                  >
                </li>
                <li>
                  <a href="work-grid-2.html"
                    ><span class="dsn-title-menu">Work 2 columns</span
                    ><span class="dsn-meta-menu">04</span></a
                  >
                </li>
                <li>
                  <a href="work-grid-4.html"
                    ><span class="dsn-title-menu">Work 4 columns</span
                    ><span class="dsn-meta-menu">05</span></a
                  >
                </li>
                <li>
                  <a href="work-load.html"
                    ><span class="dsn-title-menu">Work Load More</span
                    ><span class="dsn-meta-menu">06</span></a
                  >
                </li>
                <li>
                  <a href="work-4.html"
                    ><span class="dsn-title-menu">Work horizontal</span
                    ><span class="dsn-meta-menu">07</span></a
                  >
                </li>
                <li>
                  <a href="work-3.html"
                    ><span class="dsn-title-menu">Work carousel</span
                    ><span class="dsn-meta-menu">08</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">About</span
                ><span class="dsn-meta-menu">04</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >About</span
                  >
                </li>
                <li>
                  <a href="about.html"
                    ><span class="dsn-title-menu">About Us</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="about-2.html"
                    ><span class="dsn-title-menu">About Us V2</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Stories</span
                ><span class="dsn-meta-menu">05</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Stories</span
                  >
                </li>
                <li>
                  <a href="blog.html"
                    ><span class="dsn-title-menu">Stories</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="blog-grid.html"
                    ><span class="dsn-title-menu">Stories Grid</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
                <li>
                  <a href="post.html"
                    ><span class="dsn-title-menu">Single Post</span
                    ><span class="dsn-meta-menu">03</span></a
                  >
                </li>
              </ul>
            </li>
            <li class="dsn-drop-down">
              <a href="#" class="user-no-selection"
                ><span class="dsn-title-menu">Contact</span
                ><span class="dsn-meta-menu">06</span
                ><span class="dsn-bg-arrow"></span
              ></a>
              <ul>
                <li class="dsn-back-menu">
                  <img src="assets/img/left-chevron.svg" alt="" /><span
                    class="dsn-title-menu"
                    >Contact</span
                  >
                </li>
                <li>
                  <a href="contact.html"
                    ><span class="dsn-title-menu">Contact</span
                    ><span class="dsn-meta-menu">01</span></a
                  >
                </li>
                <li>
                  <a href="contact-2.html"
                    ><span class="dsn-title-menu">Contact V2</span
                    ><span class="dsn-meta-menu">02</span></a
                  >
                </li>
              </ul>
            </li>
          </ul>
          <div class="container-content d-flex flex-column justify-content-end">
            <div class="nav__info">
              <div class="nav-content">
                <p class="title-line">Studio</p>
                <p>
                  26-30 New Damietta<br />
                  El-Mahalla El-Kubra,SK1 66LM
                </p>
              </div>
              <div class="nav-content">
                <p class="title-line">Contact</p>
                <p class="links over-hidden">
                  <a
                    href="#"
                    data-hover-text="+00 (2)012 3321"
                    class="link-hover"
                    >+00(2)012 3321</a
                  >
                </p>
                <p class="links over-hidden">
                  <a
                    href="#"
                    data-hover-text="info@dsngrid.com"
                    class="link-hover"
                    >info@dsngrid.com</a
                  >
                </p>
              </div>
            </div>
            <div class="nav-social">
              <div class="nav-social-inner p-relative">
                <p class="title-line">Follow us</p>
                <ul>
                  <li>
                    <a href="#" target="_blank" rel="nofollow"
                      >Dribbble.
                      <div class="icon-circle"></div>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" rel="nofollow"
                      >Behance.
                      <div class="icon-circle"></div>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" rel="nofollow"
                      >Linkedin.
                      <div class="icon-circle"></div>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" rel="nofollow"
                      >Twitter.
                      <div class="icon-circle"></div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="nav-border-bottom"></div>
        </nav>
      </div>
    </div>
    <main class="main-root">
      <div
        class="main-slider p-relative w-100 h-100-v over-hidden"
        data-dsn-header="parallax"
      >
        <div class="bg-container" id="dsn-hero-parallax-img">
          <div class="slide-inner h-100">
            <div class="swiper-wrapper">
              <div class="slide-item swiper-slide">
                <div
                  class="image-bg cover-bg w-100 h-100"
                  data-image-src="assets/img/project/project1/1.jpg"
                  data-overlay="2"
                ></div>
                <div class="slide-content p-absolute h-100 w-100">
                  <div class="row align-items-center h-100">
                    <div class="content p-relative w-100">
                      <div class="metas d-inline-block">
                        <span>Product</span>
                      </div>
                      <h1 class="title user-no-selection">
                        <a
                          href="project1.html"
                          class="effect-ajax"
                          data-dsn-ajax="slider"
                          >Diesel Watch</a
                        >
                      </h1>
                      <div
                        class="sub-text-header d-inline-block user-no-selection"
                      >
                        <h5>Elia Pirazzo</h5>
                        <span>- March 17th 2016</span>
                      </div>
                      <div class="dsn-button-link mt-30 user-no-selection">
                        <a
                          href="project1.html"
                          class="link-custom effect-ajax d-flex a-item-center p-relative"
                          data-dsn-ajax="slider"
                          ><span class="link-text">View Case</span
                          ><span class="link-circle p-absolute"
                            ><i class="fas fa-arrow-right"></i></span
                        ></a>
                      </div>
                    </div>
                  </div>
                  <div
                    class="description p-absolute d-flex a-item-center background-section"
                  >
                    <p>
                      Vin tries to reflect Diesel’s vision and combines the
                      universe of the rock of the 80’s with a clear
                    </p>
                  </div>
                </div>
              </div>
              <div class="slide-item swiper-slide">
                <div
                  class="image-bg cover-bg w-100 h-100"
                  data-image-src="assets/img/project/project6/1.jpg"
                  data-overlay="5"
                  data-dsn-position="57%"
                ></div>
                <div class="slide-content p-absolute h-100 w-100">
                  <div class="row align-items-center h-100">
                    <div class="content p-relative w-100">
                      <div class="metas d-inline-block user-no-selection">
                        <span>Fashion</span><span>Photography</span>
                      </div>
                      <h1 class="title user-no-selection">
                        <a
                          href="project6.html"
                          class="color-white effect-ajax"
                          data-dsn-ajax="slider"
                          >NFL Combine</a
                        >
                      </h1>
                      <div
                        class="sub-text-header d-inline-block user-no-selection"
                      >
                        <h5>Kirk Roush</h5>
                        <span>- March 1st 2017</span>
                      </div>
                      <div class="dsn-button-link mt-30 user-no-selection">
                        <a
                          href="project6.html"
                          class="link-custom effect-ajax d-flex a-item-center p-relative"
                          data-dsn-ajax="slider"
                          ><span class="link-text">View Case</span
                          ><span class="link-circle p-absolute"
                            ><i class="fas fa-arrow-right"></i></span
                        ></a>
                      </div>
                    </div>
                  </div>
                  <div
                    class="description p-absolute d-flex a-item-center background-section"
                  >
                    <p>
                      Series of images used for Under Armour's NFL combine
                      authentic apparel. Photography
                    </p>
                  </div>
                </div>
              </div>
              <div class="slide-item swiper-slide">
                <div
                  class="image-bg cover-bg w-100 h-100"
                  data-image-src="assets/img/project/project2/1.jpg"
                  data-overlay="5"
                  data-dsn-position="38%"
                ></div>
                <div class="slide-content p-absolute h-100 w-100">
                  <div class="row align-items-center h-100">
                    <div class="content p-relative w-100">
                      <div class="metas d-inline-block user-no-selection">
                        <span>Photography</span>
                      </div>
                      <h1 class="title user-no-selection">
                        <a
                          href="project2.html"
                          class="color-white effect-ajax"
                          data-dsn-ajax="slider"
                          >Zero Untitled</a
                        >
                      </h1>
                      <div
                        class="sub-text-header d-inline-block user-no-selection"
                      >
                        <h5>Aaron Brimhall</h5>
                        <span>- March 17th 2020</span>
                      </div>
                      <div class="dsn-button-link mt-30 user-no-selection">
                        <a
                          href="project2.html"
                          class="link-custom effect-ajax d-flex a-item-center p-relative"
                          data-dsn-ajax="slider"
                          ><span class="link-text">View Case</span
                          ><span class="link-circle p-absolute"
                            ><i class="fas fa-arrow-right"></i></span
                        ></a>
                      </div>
                    </div>
                  </div>
                  <div
                    class="description p-absolute d-flex a-item-center background-section"
                  >
                    <p>
                      A beautifully designed bike from Zero Motorcycles SR/S.
                      Huggo Eccles from Untitled Motorcycles has created
                      something spectacular to the eye.
                    </p>
                  </div>
                </div>
              </div>
              <div class="slide-item swiper-slide">
                <div
                  class="image-bg cover-bg w-100 h-100"
                  data-image-src="assets/img/project/project5/1.jpg"
                  data-overlay="5"
                  data-dsn-position="58%"
                ></div>
                <div class="slide-content p-absolute h-100 w-100">
                  <div class="row align-items-center h-100">
                    <div class="content p-relative w-100">
                      <div class="metas d-inline-block user-no-selection">
                        <span>Fashion</span><span>Photography</span>
                      </div>
                      <h1 class="title user-no-selection">
                        <a
                          href="project5.html"
                          class="color-white effect-ajax"
                          data-dsn-ajax="slider"
                          >Blue Edition</a
                        >
                      </h1>
                      <div
                        class="sub-text-header d-inline-block user-no-selection"
                      >
                        <h5>Elia Pirazzo</h5>
                        <span>- March 29th 2020</span>
                      </div>
                      <div class="dsn-button-link mt-30 user-no-selection">
                        <a
                          href="project5.html"
                          class="link-custom effect-ajax d-flex a-item-center p-relative"
                          data-dsn-ajax="slider"
                          ><span class="link-text">View Case</span
                          ><span class="link-circle p-absolute"
                            ><i class="fas fa-arrow-right"></i></span
                        ></a>
                      </div>
                    </div>
                  </div>
                  <div
                    class="description p-absolute d-flex a-item-center background-section"
                  >
                    <p>Pink Tint Photosession for popular Model in Ukraine .</p>
                  </div>
                </div>
              </div>
              <div class="slide-item swiper-slide">
                <div
                  class="image-bg cover-bg w-100 h-100"
                  data-image-src="assets/img/project/project3/1.jpg"
                  data-overlay="6"
                ></div>
                <div class="slide-content p-absolute h-100 w-100">
                  <div class="row align-items-center h-100">
                    <div class="content p-relative w-100">
                      <div class="metas d-inline-block user-no-selection">
                        <span>Architecture</span>
                      </div>
                      <h1 class="title user-no-selection">
                        <a
                          href="project3.html"
                          class="color-white effect-ajax"
                          data-dsn-ajax="slider"
                          >Black Apartment</a
                        >
                      </h1>
                      <div
                        class="sub-text-header d-inline-block user-no-selection"
                      >
                        <h5>Georgiy Traksel</h5>
                        <span>- March 25th 2020</span>
                      </div>
                      <div class="dsn-button-link mt-30 user-no-selection">
                        <a
                          href="project3.html"
                          class="link-custom effect-ajax d-flex a-item-center p-relative"
                          data-dsn-ajax="slider"
                          ><span class="link-text">View Case</span
                          ><span class="link-circle p-absolute"
                            ><i class="fas fa-arrow-right"></i></span
                        ></a>
                      </div>
                    </div>
                  </div>
                  <div
                    class="description p-absolute d-flex a-item-center background-section"
                  >
                    <p>
                      Used softwares:3ds max,corona render,quixel mixer and
                      Photoshop Overall lighting HDRI
                    </p>
                  </div>
                </div>
              </div>
              <div class="slide-item swiper-slide">
                <div
                  class="image-bg cover-bg w-100 h-100"
                  data-image-src="assets/img/project/project4/1.jpg"
                  data-overlay="5"
                ></div>
                <div class="slide-content p-absolute h-100 w-100">
                  <div class="row align-items-center h-100">
                    <div class="content p-relative w-100">
                      <div class="metas d-inline-block user-no-selection">
                        <span>Digital Art</span>
                      </div>
                      <h1 class="title user-no-selection">
                        <a
                          href="project4.html"
                          class="color-white effect-ajax"
                          data-dsn-ajax="slider"
                          >Intentional</a
                        >
                      </h1>
                      <div
                        class="sub-text-header d-inline-block user-no-selection"
                      >
                        <h5>Pawel Nolbert</h5>
                        <span>- June 13th 2018</span>
                      </div>
                      <div class="dsn-button-link mt-30 user-no-selection">
                        <a
                          href="project4.html"
                          class="link-custom effect-ajax d-flex a-item-center p-relative"
                          data-dsn-ajax="slider"
                          ><span class="link-text">View Case</span
                          ><span class="link-circle p-absolute"
                            ><i class="fas fa-arrow-right"></i></span
                        ></a>
                      </div>
                    </div>
                  </div>
                  <div
                    class="description p-absolute d-flex a-item-center background-section"
                  >
                    <p>
                      Personal conceptual project. Reflecting on my personal
                      style of paint illustration.
                    </p>
                  </div>
                </div>
              </div>
              <div class="slide-item swiper-slide">
                <div
                  class="cover-bg h-100 w-100 p-absolute hidden"
                  data-image-src="assets/img/project/project7/1.jpg"
                  data-overlay="7"
                ></div>
                <div class="image-bg cover-bg w-100 h-100">
                  <div data-dsn="video" data-overlay="6">
                    <video
                      class="bg-image cover-bg dsn-video"
                      poster="assets/img/project/project7/1.jpg"
                      autoplay
                      loop
                      muted
                    >
                      <source
                        src="http://theme.dsngrid.com/video/Equator.mp4"
                        type="video/mp4"
                      />
                    </video>
                  </div>
                </div>
                <div class="slide-content p-absolute h-100 w-100">
                  <div class="row align-items-center h-100">
                    <div class="content p-relative w-100">
                      <div class="metas d-inline-block user-no-selection">
                        <span>Architecture</span><span>Video</span>
                      </div>
                      <h1 class="title user-no-selection">
                        <a
                          href="project7.html"
                          class="color-white effect-ajax"
                          data-dsn-ajax="slider"
                          >EQUATOR CGI</a
                        >
                      </h1>
                      <div
                        class="sub-text-header d-inline-block user-no-selection"
                      >
                        <h5>Russian Archviz</h5>
                        <span>- January 12th 2020</span>
                      </div>
                      <div class="dsn-button-link mt-30 user-no-selection">
                        <a
                          href="project7.html"
                          class="link-custom effect-ajax d-flex a-item-center p-relative"
                          data-dsn-ajax="slider"
                          ><span class="link-text">View Case</span
                          ><span class="link-circle p-absolute"
                            ><i class="fas fa-arrow-right"></i></span
                        ></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="slide-item swiper-slide">
                <div
                  class="image-bg cover-bg w-100 h-100"
                  data-image-src="assets/img/project/project8/1.jpg"
                  data-overlay="7"
                  data-dsn-position="34%"
                ></div>
                <div class="slide-content p-absolute h-100 w-100">
                  <div class="row align-items-center h-100">
                    <div class="content p-relative w-100">
                      <div class="metas d-inline-block user-no-selection">
                        <span>Photography</span>
                      </div>
                      <h1 class="title user-no-selection">
                        <a
                          href="project8.html"
                          class="color-white effect-ajax"
                          data-dsn-ajax="slider"
                          >NATIVE UNION</a
                        >
                      </h1>
                      <div
                        class="sub-text-header d-inline-block user-no-selection"
                      >
                        <h5>Britney Lam</h5>
                        <span>- September 14th 2019</span>
                      </div>
                      <div class="dsn-button-link mt-30 user-no-selection">
                        <a
                          href="project8.html"
                          class="link-custom effect-ajax d-flex a-item-center p-relative"
                          data-dsn-ajax="slider"
                          ><span class="link-text">View Case</span
                          ><span class="link-circle p-absolute"
                            ><i class="fas fa-arrow-right"></i></span
                        ></a>
                      </div>
                    </div>
                  </div>
                  <div
                    class="description p-absolute d-flex a-item-center background-section"
                  >
                    <p>
                      Personal conceptual project. Reflecting on my personal
                      style of paint illustration.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="box-next p-absolute nav-slider overflow-hidden header-no-scale-hero"
        >
          <div class="swiper-wrapper" role="navigation"></div>
        </div>
        <div class="dsn-controls p-absolute d-flex a-item-center">
          <div class="dsn-numbers d-block text-center"><span>01</span></div>
          <div class="dsn-progress p-relative">
            <div class="dsn-progress-indicator p-absolute w-100"></div>
          </div>
          <div class="dsn-numbers d-block text-center">
            <span class="full-number fw-blod">05</span>
          </div>
        </div>
        <div class="social-network-box text-center w-100-v">
          <div class="social-network">
            <ul>
              <li>
                <a class="link-hover" href="#" data-hover-text="facebook"
                  >facebook</a
                >
              </li>
              <li>
                <a class="link-hover" href="#" data-hover-text="behance"
                  >behance</a
                >
              </li>
              <li>
                <a class="link-hover" href="#" data-hover-text="instagram"
                  >instagram</a
                >
              </li>
            </ul>
          </div>
        </div>
        <div class="dsn-slider-content p-absolute h-100 w-100">
          <div
            class="content-slider margin-lr-100 p-relative w-100 h-100"
          ></div>
        </div>
      </div>
    </main>
    <div class="cursor">
      <div class="cursor-helper">
        <span class="cursor-drag">Drag</span
        ><span class="cursor-view">View</span
        ><span class="cursor-open"><i class="fas fa-plus"></i></span
        ><span class="cursor-close">Close</span
        ><span class="cursor-play">play</span
        ><span class="cursor-next"><i class="fas fa-arrow-right"></i></span
        ><span class="cursor-prev"><i class="fas fa-arrow-left"></i></span>
      </div>
    </div>
    <div class="scroll-to-top">
      <img src="assets/img/scroll_top.svg" alt="" />
      <div class="box-numper"><span>10%</span></div>
    </div>
    <div class="day-night">
      <div class="night active" data-dsn-theme="dark">
        <svg width="48" height="48" viewBox="0 0 48 48">
          <rect x="12.3" y="23.5" width="2.6" height="1"></rect>
          <rect
            x="16.1"
            y="15.3"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.8871 16.5732)"
            width="1"
            height="2.6"
          ></rect>
          <rect x="23.5" y="12.3" width="1" height="2.6"></rect>
          <rect
            x="30.1"
            y="16.1"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -2.5145 27.0538)"
            width="2.6"
            height="1"
          ></rect>
          <rect x="33.1" y="23.5" width="2.6" height="1"></rect>
          <rect
            x="30.9"
            y="30.1"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.9952 31.4264)"
            width="1"
            height="2.6"
          ></rect>
          <rect x="23.5" y="33.1" width="1" height="2.6"></rect>
          <rect
            x="15.3"
            y="30.9"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -17.3677 20.9457)"
            width="2.6"
            height="1"
          ></rect>
          <path
            d="M24,18.7c-2.9,0-5.3,2.4-5.3,5.3s2.4,5.3,5.3,5.3s5.3-2.4,5.3-5.3S26.9,18.7,24,18.7z M24,28.3c-2.4,0-4.3-1.9-4.3-4.3s1.9-4.3,4.3-4.3s4.3,1.9,4.3,4.3S26.4,28.3,24,28.3z"
          ></path>
        </svg>
      </div>
      <div class="moon" data-dsn-theme="night">
        <svg width="48" height="48" viewBox="0 0 48 48">
          <path
            d="M24,33.9c-5.4,0-9.9-4.4-9.9-9.9c0-4.3,2.7-8,6.8-9.4l0.8-0.3l-0.1,0.9c-0.2,0.6-0.2,1.3-0.2,1.9c0,5.2,4.3,9.5,9.5,9.5c0.6,0,1.3-0.1,1.9-0.2l0.8-0.2L33.3,27C32,31.1,28.3,33.9,24,33.9z M20.4,15.9c-3.2,1.4-5.3,4.5-5.3,8.1c0,4.9,4,8.9,8.9,8.9c3.6,0,6.7-2.1,8.1-5.3c-0.4,0-0.8,0.1-1.3,0.1c-5.8,0-10.5-4.7-10.5-10.5C20.4,16.7,20.4,16.3,20.4,15.9z"
          ></path>
        </svg>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <script src="assets/js/jquery-3.1.1.min.js"></script>
    <script src="assets/js/plugins.js"></script>
    <script src="assets/js/dsn-grid.js"></script>
    <script src="assets/js/custom.js"></script>
  </body>
</html>
